<template>
	<div class="avue-top">
		<div class="top-bar__left">
			<div v-if="showCollapse" :class="[{ 'avue-breadcrumb--active': isCollapse }]" class="avue-breadcrumb">
				<i class="icon-navicon" @click="setCollapse" />
			</div>
		</div>

		<div class="top-bar__right">
			<!-- <div class="madp-drop-select">
                <el-dropdown @command="changeCompany" v-if="companyList.length > 0">
                    <div v-if="hardReset">
                        <span class="el-dropdown-link">
                            {{ companyList[0].corpName }}
                            <i
                                class="el-icon-arrow-down el-icon--right"
                            />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                v-for="(item, index) in companyList"
                                :key="item.datetime"
                                :disabled="index == 0"
                                :command="index"
                                divided
                            >{{ item.corpName }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </div>
                </el-dropdown>
            </div>-->
			<!-- <el-tooltip v-if="showColor" effect="dark" content="主题色" placement="bottom">
                <div class="top-bar__item">
                    <top-color />
                </div>
            </el-tooltip>-->
			<!-- <el-tooltip
                v-if="showDebug"
                :content="logsFlag ? '没有错误日志' : `${logsLen}条错误日志`"
                effect="dark"
                placement="bottom"
            >
                <div class="top-bar__item">
                    <top-logs />
                </div>
            </el-tooltip>
            <el-tooltip v-if="showLock" effect="dark" content="锁屏" placement="bottom">
                <div class="top-bar__item">
                    <top-lock />
                </div>
            </el-tooltip>-->
			<el-tooltip v-if="showFullScren" :content="isFullScren ? '退出全屏' : '全屏'" effect="dark" placement="bottom">
				<div class="top-bar__item">
					<i :class="isFullScren ? 'icon-zuixiaohua' : 'icon-quanpingzuidahua'" @click="handleScreen" />
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="用户头像" placement="bottom">
				<div>
					<img v-if="!defaultAvatar" id="thumbnail" class="top-bar__img" />
					<img v-if="defaultAvatar" src="/img/user.png" class="top-bar__img" />
				</div>
			</el-tooltip>
			<div class="madp-drop-select">
				<el-dropdown>
					<span class="el-dropdown-link">
						{{ userInfo.username }}
						<i class="el-icon-arrow-down el-icon--right" />
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item divided @click.native="toUrl('/')">首页</el-dropdown-item>
						<el-dropdown-item divided @click.native="toUrl('/info/index')">个人信息</el-dropdown-item>
						<el-dropdown-item divided @click.native="$refs.seting.open()">界面设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出系统</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<top-setting ref="seting" />
		</div>
	</div>
</template>
<script>
import { getStore } from '@/util/store.js';
import { mapGetters, mapState } from 'vuex';
import { fullscreenToggel, handleImg, listenfullscreen } from '@/util/util';
import topLock from './top-lock';
import topMenu from './top-menu';
import topTheme from './top-theme';
import topLogs from './top-logs';
import topColor from './top-color';
import topSetting from './top-setting';

export default {
	name: 'Top',
	components: {
		topLock,
		topMenu,
		topTheme,
		topLogs,
		topColor,
		topSetting,
	},
	filters: {},
	data() {
		return {
			companyList: [],
			hardReset: false,
			defaultAvatar: false,
		};
	},
	computed: {
		// corpsList(){
		//    return  getStore({
		//             name: 'corpsList'
		//           }) || []

		// },
		...mapState({
			showDebug: (state) => state.common.showDebug,
			showTheme: (state) => state.common.showTheme,
			showLock: (state) => state.common.showLock,
			showFullScren: (state) => state.common.showFullScren,
			showCollapse: (state) => state.common.showCollapse,
			showMenu: (state) => state.common.showMenu,
			showColor: (state) => state.common.showColor,
		}),
		...mapGetters(['userInfo', 'isFullScren', 'tagWel', 'tagList', 'isCollapse', 'tag', 'logsLen', 'logsFlag']),
	},
	watch: {
		userInfo: {
			handler(newVal, oldVal) {
				if (newVal && newVal.avatar) {
					handleImg(newVal.avatar, 'thumbnail');
				} else {
					this.defaultAvatar = true;
				}
			},
			immediate: true,
		},
	},
	mounted() {
		listenfullscreen(this.setScreen);
		this.companyList = getStore({ name: 'corpsList' }) || [];
		this.hardReset = false;
		this.$nextTick(() => {
			this.hardReset = true;
		});
	},
	methods: {
		toUrl(path) {
			this.$router.push({ path });
		},
		changeCompany(i) {
			let currentCompany = this.companyList[i];
			this.companyList.splice(i, 1);
			this.companyList.unshift(currentCompany);
			this.$store.commit('SET_CORPS', this.companyList);
			location.reload();
		},
		handleScreen() {
			fullscreenToggel();
		},
		setCollapse() {
			this.$store.commit('SET_COLLAPSE');
		},
		setScreen() {
			this.$store.commit('SET_FULLSCREN');
		},
		logout() {
			this.$confirm('是否退出系统, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$router.push({ path: '/login' });
					});
				})
				.catch(() => {});
		},
	},
};
</script>

<style lang="scss" scoped>
.madp-drop-select {
	.el-dropdown {
		display: flex;
		height: 32px;
		cursor: pointer;
		align-items: center;
	}
}
.el-dropdown-menu--medium .el-dropdown-menu__item.el-dropdown-menu__item--divided {
	margin-top: 0px;
	height: 40px;
	line-height: 40px;
}
</style>
